<template>
  <div class="RfmConfigDialog">
    <el-dialog :close-on-click-modal="false" title="会员分群设置" width="" :visible.sync="visible" :show-close="false" center>
      <el-form ref="form" :model="form">
        <el-form-item v-for="(item, index) in form" :key="index">
          <span class="label" />
          {{ item.name }}
          <!-- <el-input v-model="item.name" type="text" maxlength="10" show-word-limit /> -->
          <br>

          <div class="condition">
            <!-- 如果多个条件 -->
            <div v-if="item.condition.list.length > 1">
              <div v-for="(item, key, index) in item.condition.list" :key="index" class="condition_item">
                <!-- 可配置 -->
                <div v-if="key == 0 && item.type == 'change'">
                  近
                  <el-input
                    v-model="item.value"
                    value="number"
                    oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=1} if(value>180){value=180}"
                  />
                  天有消费
                </div>
                <div v-if="key == 1 && item.type == 'change'">
                  近
                  <el-input
                    v-model="item.value"
                    value="number"
                    oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=1} if(value>180){value=180}"
                  />
                  天无消费
                </div>

                <div v-if="item.type == 'changeCar'">
                  近
                  <el-input
                    v-model="item.value"
                    value="number"
                    oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=1} if(value>180){value=180}"
                  />
                  天有加过购物车
                </div>
                <div v-if="item.type == 'changeOrder'">
                  近
                  <el-input
                    v-model="item.value"
                    value="number"
                    oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=1} if(value>180){value=180}"
                  />
                  天有下过单
                </div>
                <!-- 不可配置 -->
                <div v-if="item.type == ''">{{ item.txt }}</div>
              </div>
            </div>

            <!-- 如果单个条件 -->
            <div v-else>
              <div v-for="(item, key, index) in item.condition.list" :key="index" class="condition_item">
                <div v-if="item.type == 'change'">
                  近
                  <el-input
                    v-model="item.value"
                    value="number"
                    oninput="if(value){value=value.replace(/[^\d]/g,'')} if(value<=0){value=1} if(value>180){value=180}"
                  />
                  天有消费
                </div>
                <div v-if="item.type == ''">{{ item.txt }}</div>
              </div>
            </div>
          </div>
        </el-form-item>
        <!-- <p style="color: #ffb72f; font-size: 12px;">注：保存会员分群设置后将在下一天统计时生效</p> -->
        <el-form-item class="btnBox">
          <el-button @click="cancel">取消</el-button>
          <el-button @click="resetBtn">重置</el-button>
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { selectMemberGroupConfigs, updateMemberGroup } from '@/api/vip'
export default {
  data() {
    return {
      visible: false,
      form: [
        {
          name: '活跃会员',
          condition: {
            list: [
              { type: 'change', value: '' } // 有消费
            ]
          }
        },
        {
          name: '预流失会员',
          condition: {
            list: [
              { type: 'change', value: '' }, // 有消费
              { type: 'change', value: '' } // 无消费
            ]
          }
        },
        {
          name: '流失会员',
          condition: {
            list: [
              { type: 'change', value: '' }, // 有消费
              { type: 'change', value: '' } // 无消费
            ]
          }
        },
        {
          name: '访问未入会顾客',
          condition: {
            list: [{ type: '', txt: '非会员顾客' }]
          }
        },
        {
          name: '未转化会员',
          condition: {
            list: [{ type: '', txt: '入会以来未完成消费' }]
          }
        },
        {
          name: '未复购会员',
          condition: {
            list: [{ type: '', txt: '入会以来仅完成1次消费' }]
          }
        },
        {
          name: '加购未支付会员',
          condition: {
            list: [
              { type: 'changeCar', value: '' }, // 天有加过购物车
              { type: '', txt: '近 1天无消费' }
            ]
          }
        },
        {
          name: '下单未支付会员',
          condition: {
            list: [
              { type: 'changeOrder', value: '' }, // 天有下过单
              { type: '', txt: '近 2天无消费' }
            ]
          }
        }
      ]
    }
  },
  mounted() {
    // this.selectMemberGroupConfigsFun()
  },
  methods: {
    onSubmit() {
      this.updateRfmFun()
    },
    edit() {
      this.visible = true
      this.selectMemberGroupConfigsFun()
    },
    cancel() {
      this.visible = false
      this.selectMemberGroupConfigsFun()
    },
    // 重置
    resetBtn() {
      this.selectMemberGroupConfigsFun()
    },

    // 查询会员分群及配置
    selectMemberGroupConfigsFun() {
      selectMemberGroupConfigs().then(res => {
        if (res.code == 0) {
          const data = res.data
          for (let i = 0; i < data.length; i++) {
            this.form[i].name = data[i].groupName
            this.form[i].id = data[i].id

            const groupConfigs = data[i].groupConfigs
            if (groupConfigs != null) {
              for (let k = 0; k < groupConfigs.length; k++) {
                this.form[i].condition.list[k].value = groupConfigs[k].conditionValue
                this.form[i].condition.list[k].id = groupConfigs[k].id

                if (i == 6) {
                  this.form[i].condition.list[k].txt = `近 ${groupConfigs[k].conditionValue}天无消费`
                } else if (i == 7) {
                  this.form[i].condition.list[k].txt = `近 ${groupConfigs[k].conditionValue}天无消费`
                }
              }
            }
          }
        }
      })
    },

    /* 修改配置 */
    updateRfmFun() {
      // 传参格式
      const params = []
      // 写入参数
      const form = this.form
      for (let i = 0; i < form.length; i++) {
        // 条件
        const list = form[i].condition.list
        // 只传可输入的值
        if (i == 6 || i == 7) {
          list.length = 1
        }
        // 不需要传
        if (i == 3 || i == 4 || i == 5) {
          list.length = null
        }
        for (let k = 0; k < list.length; k++) {
          const value = list[k].value
          const id = list[k].id
          if (value != undefined) {
            const conditionValue = { conditionValue: value, id: id }
            params.push(conditionValue)
          }
        }
      }
      updateMemberGroup(params).then(res => {
        if (res.code == 0) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          })
          this.$emit('RfmForm', this.form)
          this.visible = false
        }
        this.echoGroupConfigFun()
      }).finally(() => {
		  this.echoGroupConfigFun()
	  })
    },

    // 数据回显
    echoGroupConfigFun() {
      selectMemberGroupConfigs().then(res => {
        if (res.code == 0) {
          const data = res.data
          for (let i = 0; i < data.length; i++) {
            const groupConfigs = data[i].groupConfigs
            if (i == 3) {
              const condition = {
                list: [{ type: '', txt: '非会员顾客' }]
              }
              this.form[i].condition = condition
            } else if (i == 4) {
              const condition = {
                list: [{ type: '', txt: '入会以来未完成消费' }]
              }
              this.form[i].condition = condition
            } else if (i == 5) {
              const condition = {
                list: [{ type: '', txt: '入会以来仅完成1次消费' }]
              }
              this.form[i].condition = condition
            } else if (i == 6) {
              const condition = {
                list: [{ type: 'changeCar', value: groupConfigs[0].conditionValue }, { type: '', txt: `近 ${groupConfigs[1].conditionValue}天无消费` }]
              }
              this.form[i].condition = condition
            } else if (i == 7) {
              const condition = {
                list: [{ type: 'changeOrder', value: groupConfigs[0].conditionValue }, { type: '', txt: `近 ${groupConfigs[1].conditionValue}天无消费` }]
              }
              this.form[i].condition = condition
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.RfmConfigDialog {
	/deep/.el-dialog {
		max-height: 700px;
		overflow-y: auto;

		&::-webkit-scrollbar {
			/*滚动条整体样式*/
			width: 2px; /*高宽分别对应横竖滚动条的尺寸*/
			height: 2px;
		}
		&::-webkit-scrollbar-thumb {
			/*滚动条里面小方块*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			background: $primary;
		}
		&::-webkit-scrollbar-track {
			/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 0;
			background: rgba(0, 0, 0, 0.1);
		}
	}
	.label {
		width: 3px;
		height: 20px;
		background-color: $primary;
		float: left;
		margin: 10px 5px 0 0;
	}
	.el-input {
		width: 300px;
		margin: 0 10px;
	}
	.condition {
		margin: 18px 0 0 10px;
		.condition_item {
			margin: 8px 0;
		}
		.el-input {
			width: 80px;
			margin: 0 16px;
		}
	}

	.btnBox {
		margin-top: 20px;
		text-align: center;
	}
}
</style>
